<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        *
        {
            margin: 0%;
            padding:0%;
            box-sizing: border-box;
        }
        html
        {
            height: 100%;
            background: linear-gradient(to bottom, #C9FFBF , #FFAFBD);
        }
        form
        {
            width: 400px;
            height: 300px;
            background: rgba(255, 255, 255, 0.3);
            margin: 0 auto;
            margin-top: 10%;
            border-radius: 2%;
            border: 1px solid #ffffff;
            box-shadow: 0px 0px 10px #ffffff;
            text-align: center;
            padding: 20px 0px;
        }
        p{
            font-size: 26px;
            font-weight: bold;
            letter-spacing: 5px;
        }
        input
        {
            margin-top: 25px;
            width: 230px;
            height: 30px;
            border-radius: 7px;
            outline: none;
            border: 1px solid rgb(211, 211, 211);
        }

        .in1,.in2
        {
            padding-left: 3px;
        }
        .in1:focus,.in2:focus
        {
            box-shadow: 0px 0px 100px #ffffff;
        }
        .submit
        {
            margin-top: 30px;
            width: 150px;
            height: 45px;
            background-color: #ffffff;
            border: 1px solid rgb(0, 225, 255);
            border-radius: 70px;
            color: rgb(0, 161, 182);
            outline: none;
        }
        .submit:hover
        {
            background: rgb(0, 161, 182);
            color: #ffffff;
        }
    </style>


</head>
<body>

<form action="webdemo2/Demo2" method="post">
    <p> LOGIN </p>
    姓名:  &nbsp;&nbsp;&nbsp;<input class="in1" type="text" name="userName"><br>
    密码:  &nbsp;&nbsp;&nbsp;<input class="in2" type="password" name="userPwd"><br>
    <input class="submit" type="submit" value="登录">
    <a href="views/register.html"><input class="submit" type="button" value="注册"></a>
    <div id="result">

    </div>

    <input type="button" onclick="checkUsername()" value="检测用户名是否合法">

</form>
</body>
<script type="text/javascript">

    var httpRequest;
    var inx = document.querySelector("input[name='userName']");
    var ck;

    inx.onblur = function()
    {
        console.log(" username 光标离开");
        // inx.focus();

        checkUsername();		// 此处用同步是需要checkUsername 给出结果后再进行后续判断
        var div = document.getElementById("result");
        if( ck == true ) {

            div.innerHTML = "√√√√";
        }
        else {
            console.log("离谱 " + ck);
            div.innerHTML = "用户名不存在";
            inx.select();
        }
    }

    function checkUsername() {


        // 1.
        if(window.XMLHttpRequest) {

            //在IE6以上的版本以及其他内核的浏览器(Mozilla)等
            httpRequest = new XMLHttpRequest();
        }else if(window.ActiveXObject) {

            //在IE6以下的版本
            httpRequest = new ActiveXObject();
        }



        // 2.

        //指定回调函数 , 注册回调函数
        httpRequest.onreadystatechange = function()		// 状态改变时 进入
        {
            // 异步代码逻辑

            // 四个状态
            console.log("" + httpRequest.readyState);

            //判断请求状态码是否是4【数据接收完成】
            if(httpRequest.readyState==4) {

                //再判断状态码是否为200【200是成功的】
                /*
                    1xx
                    2xx 服务端正常相应客户端
                    3xx 服务端资源没有发生改变
                    4xx 资源错误
                    5xx 服务端错误
                */
                console.log("数据接受完成");
                if(httpRequest.status==200) {


                    //得到服务端返回的文本数据
                    var text = httpRequest.responseText;
                    console.log(text);
                    if( text == "true")
                    {
                        ck = true;
                        console.log("获得确认");
                    }
                    else	ck = false;

                    //把服务端返回的数据写在div上
                    // var div = document.getElementById("result");
                    /* json 文件转化实例 */

                    /*
                        var json = JSON.parse(text);
                        console.log(json);
                        //把服务端返回的数据写在div上
                        var div = document.getElementById("result");

                        // 创建
                        var node = document.createElement("p");
                        node.appendChild(document.createTextNode(json.sites[0].name));
                        div.appendChild(node);
                        // div.innerText = text;
                    */

                    // div.innerText = text;
                }

            }
        }

        // 3.
        //创建http请求
        // httpRequest.open("POST", "Ltest", true);		// true 异步 | false 同步
        httpRequest.open("POST", "Demo2", false);
        //因为我使用的是post方式，所以需要设置消息头
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //得到文本框的数据
        var name = inx.value;
        console.log(name + " 用户名数据数据");
        // 4.
        // 发送请求
        // 如果要传递数据给服务端，把数据作为参数传进去
        var data = "userName=" + name;
        httpRequest.send(data);

        /*	 中文传输乱码解决方式
        var  name = encodeURI(name);
        */
    }

</script>

</html>